<template>
    <div>
<van-nav-bar  class="log" title="注册页面"  >
    <template #left>
 <van-icon  @click.native="$router.back(-1)" name="arrow-left" />
 
    </template>
  <template #right>
       <router-link to='/' class="rl" slot="right">首页</router-link>&nbsp;&nbsp;&nbsp;
     <router-link to='/log' class="rl" slot="right">登录</router-link>

  </template>
</van-nav-bar>


    <van-form @submit="onSubmit">
  <van-field
    v-model="account"
    name="账号"
    label="账号"
    placeholder="账号"
    :rules="[{ required: true, message: '请填写用户名' },
    {pattern:/^\w{6,15}$/,message:'用户名错误'}]"
  />
  <van-field
    v-model="pwd"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' },
    {pattern:/^\d{6}$/,message:'密码错误'}]"
  />
  <div style="margin: 16px;">
    <van-button  @click="reg" round block type="info" native-type="button">注册</van-button>
  </div>
  <van-field name="radio" label="">
  <template #input>
    <van-radio-group v-model="radio" direction="horizontal">
      <van-radio name="1">我已阅读并同意...</van-radio>
  
    </van-radio-group>
  </template>
</van-field>
</van-form>

        

    </div>
</template>
<script>
export default {
    data() {
        return {
            account: '',
            nameState:'',
            pwd: '',
            pwdState:'',
            active: 2,
            radio:1,
        }
    },
      methods: {
              onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');},
        onSubmit(values) {
      console.log(submit);
      
    },
reg(){
  console.log(this.pwd,this.account);
          this.axios.post('/register',
          `account=${this.account}&password=${this.pwd}`)
          .then(result=>{
            console.log(result);
            
            if (result.data.code==200){ 
              
              this.$toast({
                message: '注册成功',
                position: 'bottom',
                duration: 3000
              })
            }else if(result.data.code==201){  
              this.$toast({
                message: '该用户已存在，请重新注册',
                position: 'bottom',
                duration: 3000
              })
            }
        })
}
  },
};

</script>
<style scoped>
/deep/ span{
  color: black;
}
.log{
  color: white;
  background-color: #26a2ff
}
.rl{
  color: white;
}
/deep/ .van-nav-bar .van-icon {
		color: #fff;
	}
  /deep/ .van-nav-bar__text {
		color: #fff;
	}
  /deep/ .van-nav-bar__title {
		color: #fff;
	}
</style>